<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { Command } from '@/commands/command.ts'
import { factors } from '@/commands/commands.ts'
import { getAll } from '@tauri-apps/api/window'

const state = reactive<{ commands: Command[] }>({ commands: [] })

onMounted(async () => {
    // 监听键盘释放事件
    document.onkeydown = async (event: KeyboardEvent) => {
        if ('w' === event.key.toLowerCase() && event.metaKey) {
            event.preventDefault()

            const windows = getAll()
            for (const window of windows) {
                if ('help' === window.label) {
                    await window.close()
                }
            }
        }
    }

    for (const factor of Object.values(factors)) {
        state.commands.push(factor(''))
    }
})
</script>

<template>
    <n-space :wrap="false" :wrap-item="false" vertical>
        <div class="title" data-tauri-drag-region>Magic Box 帮助手册</div>
        <n-divider>特殊命令</n-divider>
        <n-collapse accordion default-expanded-names="1">
            <n-collapse-item name="help" title="help(Command + Shift + h)">
                <n-space :wrap="false" :wrap-item="false" vertical>
                    <div class="usage">用法: help</div>
                    <div class="description">打开帮助面板</div>
                </n-space>
            </n-collapse-item>
            <n-collapse-item name="setting" title="setting(Command + Shift + ,)">
                <n-space :wrap="false" :wrap-item="false" vertical>
                    <div class="usage">用法: setting</div>
                    <div class="description">打开设置面板</div>
                </n-space>
            </n-collapse-item>
        </n-collapse>
        <n-divider>组件命令</n-divider>
        <n-collapse accordion default-expanded-names="1">
            <n-collapse-item name="v2ray" title="v2ray(Command + Shift + b)">
                <n-space :wrap="false" :wrap-item="false" vertical>
                    <div class="usage">用法: v2ray</div>
                    <div class="description">打开V2ray组件面板</div>
                </n-space>
            </n-collapse-item>
        </n-collapse>
        <n-divider>常规命令</n-divider>
        <n-collapse accordion default-expanded-names="1">
            <template v-for="command in state.commands" :key="command.name">
                <n-collapse-item :name="command.name" :title="command.name">
                    <n-space :wrap="false" :wrap-item="false" vertical>
                        <div class="usage">用法: {{ command.usage() }}</div>
                        <div class="description">
                            <div v-html="command.description()"></div>
                        </div>
                    </n-space>
                </n-collapse-item>
            </template>
        </n-collapse>
    </n-space>
</template>

<style lang="scss" scoped>
.title {
    font-size: 24px;
    line-height: 2;
    cursor: default;
    text-align: center;
}

.usage {
    font-weight: 600;
}

.description {
    margin-top: 15px;
}
</style>

<style lang="scss">
.option-row {
    line-height: 2;
}

.option-option {
    width: 120px;
    display: inline-block;
}
</style>
